<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>成绩管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" type="text/css">
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

<%@ include file="index.jsp" %>
<br>

<div class="row">
    <div class="container">
        <h3 class="text-center">成绩列表</h3>
        <hr>
        <div class="container text-left">
            <a href="<%=request.getContextPath()%>/grade/add" class="btn btn-success">添加成绩记录</a>
            <button class="btn btn-primary" onclick="showChart('student')">按学生查看成绩报表</button>
            <button class="btn btn-info" onclick="showChart('course')">按科目查看成绩报表</button>
        </div>
        <br>

        <table class="table table-bordered">
            <thead>
            <tr>
                <th>序号</th>
                <th>学生姓名</th>
                <th>课程名</th>
                <th>成绩</th>
                <th>学期</th>
                <th>考试日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="grade" items="${gradeList}">
                <tr>
                    <td><c:out value="${grade.gradeId}"/></td>
                    <td><c:out value="${grade.studentName}"/></td>
                    <td><c:out value="${grade.courseName}"/></td>
                    <td><c:out value="${grade.score}"/></td>
                    <td><c:out value="${grade.term}"/></td>
                    <td><c:out value="${grade.examDate}"/></td>
                    <td>
                        <a href="<%=request.getContextPath()%>/grade/edit?gradeId=<c:out value='${grade.gradeId}' />">编辑</a>
                        <a href="<%=request.getContextPath()%>/grade/del?gradeId=<c:out value='${grade.gradeId}' />">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<div id="chartModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div id="chartContainer" style="height:400px;"></div>
    </div>
</div>

<script>
    // 初始化echarts实例
    let myChart;
    const modal = document.getElementById('chartModal');
    const span = document.getElementsByClassName("close")[0];

    // 当用户点击 (x), 关闭弹窗
    span.onclick = function() {
        modal.style.display = "none";
    }

    // 在用户点击其他地方时，关闭弹窗
    window.onclick = function(event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    }

    // 准备数据
    const gradeData = [
        <c:forEach var="grade" items="${gradeList}" varStatus="status">
        {
            studentName: '${grade.studentName}',
            courseName: '${grade.courseName}',
            score: ${grade.score}
        }<c:if test="${!status.last}">, </c:if>
        </c:forEach>
    ];

    function showChart(type) {
        modal.style.display = "block";
        if (!myChart) {
            myChart = echarts.init(document.getElementById('chartContainer'));
        }
        if (type === 'student') {
            showStudentChart();
        } else {
            showCourseChart();
        }
    }

    function showStudentChart() {
        // 处理数据，按学生分组
        // 初始化一个空对象来存储每个学生的成绩
        const students = {};
        // 遍历gradeData数组，按学生姓名分组整理成绩数据
        gradeData.forEach(item => {
            if (!students[item.studentName]) {
                students[item.studentName] = {};
            }
            students[item.studentName][item.courseName] = item.score;
        });

        // 获取所有不同的课程名称
        const courseNames = [...new Set(gradeData.map(item => item.courseName))];
        // 构建图表的series数据结构
        const series = courseNames.map(course => ({
            name: course,
            type: 'bar',
            // 对每个学生，提取该课程的成绩，如果没有则为0
            data: Object.keys(students).map(student => students[student][course] || 0)
        }));

        // 配置项
        const option = {
            title: {
                text: '学生各科成绩对比'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                // 使用课程名称作为图例
                data: courseNames
            },
            xAxis: {
                // X轴显示学生姓名
                data: Object.keys(students)
            },
            yAxis: {
                type: 'value',
                name: '分数'
            },
            series: series
        };

        // 将配置项应用到图表实例
        myChart.setOption(option);
    }

    function showCourseChart() {
        // 处理数据，按课程分组
        const courses = {};
        gradeData.forEach(item => {
            if (!courses[item.courseName]) {
                courses[item.courseName] = {};
            }
            courses[item.courseName][item.studentName] = item.score;
        });

        const studentNames = [...new Set(gradeData.map(item => item.studentName))];

        const series = studentNames.map(student => ({
            name: student,
            type: 'bar',
            data: Object.keys(courses).map(course => courses[course][student] || 0)
        }))

        // 配置项
        const option = {
            title: {
                text: '各科目学生成绩分布'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: studentNames
            },
            xAxis: {
                data: Object.keys(courses)
            },
            yAxis: {
                type: 'value',
                name: '分数'
            },
            series: series
        };
        myChart.setOption(option);
    }
</script>

</body>
</html>